{% extends 'ApplicationToolsBundle::layout12.html.twig' %}

{% block title %}Font Awesome{% endblock %}

{% block stylesheets %}    
    <link href="{{ asset('bundles/applicationtools/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <!--[if IE 7]>
        <link href="{{ asset('bundles/applicationtools/css/fonts/font-awesome/font-awesome-ie7.css') }}" rel="stylesheet" type="text/css" media="all" />
    <![endif]-->
    <style type="text/css">
		.the-icons .cell a{display:block;cursor:pointer;line-height:32px;height:32px;padding-left:10px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
		.the-icons .cell a,
		.the-icons .cell a:hover{color:#222222;}
		.the-icons .cell a [class^="icon-"],
		.the-icons .cell a [class*=" icon-"]{width:32px;font-size:14px;display:inline-block;text-align:right;margin-right:10px;}
		.the-icons .cell a:hover{background-color:#fff0f0;text-decoration:none;}
		.the-icons .cell a:hover [class^="icon-"],
		.the-icons .cell a:hover [class*=" icon-"]{*font-size:28px;*vertical-align:middle;}
		.the-icons .cell a:hover [class^="icon-"]:before,
		.the-icons .cell a:hover [class*=" icon-"]:before{font-size:28px;vertical-align:-6px;}
    </style>
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block body %}

<div class="grid_row">
    <div class="grid_12">
        <h2>Font Awesome (<small>jednotka</small>)</h2>
        <h6>
            <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a>
            <a href="https://github.com/FortAwesome/Font-Awesome/" target="_blank">github</a>
        </h6>
        <p>Po wrzuceniu nowej paczki z czcionkami musimy wyczyścić cache przeglądarki.</p>
    </div>
    <div class="clear"></div>
</div>

<h3>New Icons in 3.2</h3>
<div class="row the-icons">
    <div class="col_8">
    	<div class="cell">
        	<a href="#"><i class="icon-compass"></i> icon-compass</a>
        	<a href="#"><i class="icon-collapse"></i> icon-collapse</a>
        	<a href="#"><i class="icon-collapse-top"></i> icon-collapse-top</a>
        	<a href="#"><i class="icon-expand"></i> icon-expand</a>
        	<a href="#"><i class="icon-eur"></i> icon-eur</a>
        	<a href="#"><i class="icon-euro"></i> icon-euro <span class="muted">(alias)</span></a>
	        <a href="#"><i class="icon-gbp"></i> icon-gbp</a>
	        <a href="#"><i class="icon-usd"></i> icon-usd</a>
        </div>
    </div>
    <div class="col_8">
    	<div class="cell">
        	<a href="#"><i class="icon-compass"></i> icon-compass</a>
        	<a href="#"><i class="icon-collapse"></i> icon-collapse</a>
        	<a href="#"><i class="icon-collapse-top"></i> icon-collapse-top</a>
        	<a href="#"><i class="icon-expand"></i> icon-expand</a>
        	<a href="#"><i class="icon-eur"></i> icon-eur</a>
        	<a href="#"><i class="icon-euro"></i> icon-euro <span class="muted">(alias)</span></a>
	        <a href="#"><i class="icon-gbp"></i> icon-gbp</a>
	        <a href="#"><i class="icon-usd"></i> icon-usd</a>
        </div>
    </div>
    <div class="col_8">
    	<div class="cell">
        	<a href="#"><i class="icon-compass"></i> icon-compass</a>
        	<a href="#"><i class="icon-collapse"></i> icon-collapse</a>
        	<a href="#"><i class="icon-collapse-top"></i> icon-collapse-top</a>
        	<a href="#"><i class="icon-expand"></i> icon-expand</a>
        	<a href="#"><i class="icon-eur"></i> icon-eur</a>
        	<a href="#"><i class="icon-euro"></i> icon-euro <span class="muted">(alias)</span></a>
	        <a href="#"><i class="icon-gbp"></i> icon-gbp</a>
	        <a href="#"><i class="icon-usd"></i> icon-usd</a>
        </div>
    </div>
    <div class="col_8">
    	<div class="cell">
        	<a href="#"><i class="icon-compass"></i> icon-compass</a>
        	<a href="#"><i class="icon-collapse"></i> icon-collapse</a>
        	<a href="#"><i class="icon-collapse-top"></i> icon-collapse-top</a>
        	<a href="#"><i class="icon-expand"></i> icon-expand</a>
        	<a href="#"><i class="icon-eur"></i> icon-eur</a>
        	<a href="#"><i class="icon-euro"></i> icon-euro <span class="muted">(alias)</span></a>
	        <a href="#"><i class="icon-gbp"></i> icon-gbp</a>
	        <a href="#"><i class="icon-usd"></i> icon-usd</a>
        </div>
    </div>
    <div class="col_8">
    	<div class="cell">
        	<a href="#"><i class="icon-compass"></i> icon-compass</a>
        	<a href="#"><i class="icon-collapse"></i> icon-collapse</a>
        	<a href="#"><i class="icon-collapse-top"></i> icon-collapse-top</a>
        	<a href="#"><i class="icon-expand"></i> icon-expand</a>
        	<a href="#"><i class="icon-eur"></i> icon-eur</a>
        	<a href="#"><i class="icon-euro"></i> icon-euro <span class="muted">(alias)</span></a>
	        <a href="#"><i class="icon-gbp"></i> icon-gbp</a>
	        <a href="#"><i class="icon-usd"></i> icon-usd</a>
        </div>
    </div>
    <div class="col_8">
    	<div class="cell">
        	<a href="#"><i class="icon-compass"></i> icon-compass</a>
        	<a href="#"><i class="icon-collapse"></i> icon-collapse</a>
        	<a href="#"><i class="icon-collapse-top"></i> icon-collapse-top</a>
        	<a href="#"><i class="icon-expand"></i> icon-expand</a>
        	<a href="#"><i class="icon-eur"></i> icon-eur</a>
        	<a href="#"><i class="icon-euro"></i> icon-euro <span class="muted">(alias)</span></a>
	        <a href="#"><i class="icon-gbp"></i> icon-gbp</a>
	        <a href="#"><i class="icon-usd"></i> icon-usd</a>
        </div>
    </div>
    <div class="col_8">
    	<div class="cell">
        	<a href="#"><i class="icon-compass"></i> icon-compass</a>
        	<a href="#"><i class="icon-collapse"></i> icon-collapse</a>
        	<a href="#"><i class="icon-collapse-top"></i> icon-collapse-top</a>
        	<a href="#"><i class="icon-expand"></i> icon-expand</a>
        	<a href="#"><i class="icon-eur"></i> icon-eur</a>
        	<a href="#"><i class="icon-euro"></i> icon-euro <span class="muted">(alias)</span></a>
	        <a href="#"><i class="icon-gbp"></i> icon-gbp</a>
	        <a href="#"><i class="icon-usd"></i> icon-usd</a>
        </div>
    </div>
    <div class="col_8">
    	<div class="cell">
        	<a href="#"><i class="icon-compass"></i> icon-compass</a>
        	<a href="#"><i class="icon-collapse"></i> icon-collapse</a>
        	<a href="#"><i class="icon-collapse-top"></i> icon-collapse-top</a>
        	<a href="#"><i class="icon-expand"></i> icon-expand</a>
        	<a href="#"><i class="icon-eur"></i> icon-eur</a>
        	<a href="#"><i class="icon-euro"></i> icon-euro <span class="muted">(alias)</span></a>
	        <a href="#"><i class="icon-gbp"></i> icon-gbp</a>
	        <a href="#"><i class="icon-usd"></i> icon-usd</a>
        </div>
    </div>
</div>

<h3>Rotated and Flipped Icons</h3>
<div class="row the-icons">
    <div class="col_8">
	    <div class="cell">
			<a href="#"><i class="icon-shield"></i>&nbsp; normal</a>
			<a href="#"><i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90</a>
			<a href="#"><i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180</a>
			<a href="#"><i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270</a>
			<a href="#"><i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a>
			<a href="#"><i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>
		</div>
    </div>
</div>

<h3>Stacked Icons</h3>
<div class="row the-icons">
    <div class="col_1">    
		<span class="icon-stack">
		  <i class="icon-check-empty icon-stack-base"></i>
		  <i class="icon-twitter"></i>
		</span>
		icon-twitter on icon-check-empty<br/>
		<span class="icon-stack">
		  <i class="icon-circle icon-stack-base"></i>
		  <i class="icon-flag icon-light"></i>
		</span>
		icon-flag on icon-circle<br/>
		<span class="icon-stack">
		  <i class="icon-sign-blank icon-stack-base"></i>
		  <i class="icon-terminal icon-light"></i>
		</span>
		icon-terminal on icon-sign-blank<br/>
		<span class="icon-stack">
		  <i class="icon-camera"></i>
		  <i class="icon-ban-circle icon-stack-base text-error"></i>
		</span>
		icon-camera on icon-ban-circle
    </div>
</div>

<h3>Larger Icons</h3>
<div class="row the-icons">
    <div class="col_1"> 
		<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro icon-large</p>
		<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro icon-2x</p>
		<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro icon-3x</p>
		<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro icon-4x</p>
    </div>
</div>

<h3>Animated Spinner</h3>
<div class="row the-icons">
    <div class="col_1">
		<i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...
    </div>
</div>

{% endblock %}